<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机点名</title>
    <style>
        .content {
            width: 1500px;
            height: 600px;
            background: #000;
            margin: 100px auto;
            text-align: center;
            position: relative;
            line-height: 300px;
            color: dodgerblue;
            font-size: 70px;
        }

        .btn1 {
            background: #ccc;
            width: 180px;
            height: 80px;
            font-size: 30px;
            color: #f40;
            border-radius: 12px;
            position: absolute;
            bottom: 30px;
            left: 50%;
            margin-left: -90px;

        }
        span{
           width: 180px; 
           height: 40px;
         
        }
    </style>
</head>

<body>
    <div class="content">
        <span id="span1">
            1号菜
        </span>
        <span id="span2">
            2号菜
        </span>
        <span id="span3">
            3号菜
        </span>
        <span id="span4">
           4号菜
        </span>
        <button class="btn1">
            开始
        </button>
    </div>
    <script>








  




        var arr=['麻辣豆腐','干锅千叶豆腐 ','干锅土豆片','三鲜汤','豆角炒茄子 ','香干回锅肉 ','杭椒炒肉','地三鲜','蒜苔炒猪耳','麻婆豆腐','杭椒炒肉','千张肉丝','手撕包菜','外婆菜炒鸡蛋 ','爆炒肥肠 ','锅巴辣子鸡丁','青椒肉丝','藕带炒鸡胗 ']
        var a0 = document.getElementById("span1")
        var a1 = document.getElementById("span2")
        var a2 = document.getElementById("span3")
        var a3 = document.getElementById("span4")
        var two = document.querySelector(".btn1");
        var flag = true;
        var total;
        var total1;
        var total2;
        var total3;
        two.onclick = function () {
            if (flag) {
                begin();
                begin1();
                begin2();
                begin3();
                two.innerHTML = '结束';
                flag = false;
            }
            else {
                over();
                over1();
                over2();
                over3();
                two.innerHTML = '开始';
                flag = true;
            }
        }
        function begin() {
            total = setInterval(function () {
                var str = myrandom(0, arr.length - 1);
                a0.innerHTML = arr[str]
            }, 100)
        }
        function begin1() {
            total1 = setInterval(function () {
                var str1 = myrandom1(0, arr.length - 1);
                a1.innerHTML = arr[str1]
            }, 100)
        }
        
        function begin2() {
            total2 = setInterval(function () {
                var str2 = myrandom2(0, arr.length - 1);
                a2.innerHTML = arr[str2]
            }, 100)
        }
        function begin3() {
            total3 = setInterval(function () {
                var str3 = myrandom3(0, arr.length - 1);
                a3.innerHTML = arr[str3]
            }, 100)
        }
        function over() {
            clearInterval(total);
           
        }
        function over1() {
            clearInterval(total1);
           
        }
        function over2() {
            clearInterval(total2);
           
        }
        function over3() {
            clearInterval(total3);
           
        }
        function myrandom(a, b) {
            var num = Math.floor(Math.random() * (b - a) + a);
            return num;
        }
        function myrandom1(a, b) {
            var num1 = Math.floor(Math.random() * (b - a) + a);
            return num1;
        }
        function myrandom2(a, b) {
            var num2 = Math.floor(Math.random() * (b - a) + a);
            return num2;
        }
        function myrandom3(a, b) {
            var num3 = Math.floor(Math.random() * (b - a) + a);
            return num3;
        }
    </script>









    </script>
</body>

</html>